import React, {Component} from 'react';
import BlockChain from './BlockChain';
import Navbar from '../components/Navbar';

export default class App extends Component {
  static formats = [
    {name: 'JSON', link: 'http://www.json.org/'},
    {name: 'JSON5', link: 'http://json5.org/'},
    {name: 'YAML', link: 'http://yaml.org/'},
    {name: 'TOML', link: 'https://github.com/toml-lang/toml'},
  ];

  render() {
    return (
      <div className="container">
        <Navbar app="format" lang="<%= LANGUAGE %>" />
        <h1>
          <%= UIText.format_title %>
        </h1>
        <p>
          {App.formats.map((format, i) => <a key={i} href={format.link} target="_blank">{format.name}</a>).insertSeparator('⇔')}
        </p>
        <BlockChain className="top-gap-big" blocks={['']} />
        <div className="menu-space"></div>
      </div>
    );
  }
}
